<template>
  <div class="createCource">
    <div class="course-top">
      <div class="top-left">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>智慧体育课堂</el-breadcrumb-item>
          <el-breadcrumb-item>教学资源管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div @click="back" class="top-right">
        返回
      </div>
    </div>
  <div class="schoolSource" v-loading="isLoading">
    <div class="source-tab">
      <div @click="changeIsSchool('1')" :class="type == 1 ?'checked':''" class="tab-item">
        校本资源
      </div>
      <div class="tab-hr">
        /
      </div>
      <div @click="changeIsSchool('2')" :class="type == 2 ? 'checked':''" class="tab-item">
        我的上传
      </div>
      <el-button @click="goCreate" style="position: absolute;right: 1.5vw;top: 1.5vw" type="primary" size="mini">添加</el-button>
    </div>
    <div class="source-select">
      <div class="select-name">
        名称：
      </div>
      <div class="select-input">
        <el-input placeholder="请输入资源名称" clearable  v-model="pageSource.fileName" size="mini" />
        <el-button type="primary" style="margin-left: .2vw" @click="getSchoolSourceList" size="mini">查询</el-button>
      </div>
      <div class="select-type">
        <div class="type-label">类型：</div>
        <div class="type-item " :class="pageSource.resourceClassification == 2? 'checked-item':''" @click="changeSourceType('2')">全部</div>
        <div class="type-item" :class="pageSource.resourceClassification == 0? 'checked-item':''" @click="changeSourceType('0')">教学资源</div>
        <div class="type-item"  :class="pageSource.resourceClassification == 1? 'checked-item':''" @click="changeSourceType('1')">课堂小游戏</div>
        <div class="type-item"  :class="pageSource.resourceClassification == 3? 'checked-item':''" @click="changeSourceType('3')">其他</div>
      </div>
      <div class="select-type-status">
        <div class="status-item" :class="pageSource.type == 1 ?'checked-status':''" @click="changeType('1')">视频</div>
        <div class="status-gang">/</div>
        <div class="status-item" :class="pageSource.type == 0  && pageSource.type != '' ? 'checked-status':''" @click="changeType('0')">图片</div>
      </div>
    </div>
    <div class="source-main">
      <div v-if="total == 0" style="display: flex;align-items: center;justify-content: center;width: 100%;height: 100%; margin-top: 2vh;
        padding: 0 2vw;">
        <img style="width: 100%;height: 60%;object-fit: contain" src="../../../assets/course_img/nullSouceShow.png" alt="">
      </div>
      <div class="main">


        <div class="main-item" v-for="item in schoolSourceList" :key="item.srcId">
          <div class="item-img">
            <img v-if="item.type ==0" :src="$store.state.user.BASE_URL + item.src" alt="">
            <video v-if="item.type ==1" :src="$store.state.user.BASE_URL + item.src" alt="" />
            <div class="item-tag">
              {{item.type == 0 ? '图片' :'视频'}}
            </div>
            <div class="item-checkedTag" v-if="false">
              <i class="el-icon-check"></i>
            </div>
          </div>
          <div class="item-title">
            {{item.fileName}}
          </div>
        </div>


      </div>

    </div>
    <div class="source-page">
      <pagination-page @size="changeSize" @page="changePage" :total="total" />
    </div>
  </div>
  </div>
</template>

<script>
import {getSchoolSource} from "@/api/schoolSource";

export default {
  data() {
    return {
      type:1,
      schoolSourceList:[],
      isLoading:false,
      total:0,
      pageSource:{
        pageNum:1,
        pageSize:10,
        teacherId:this.$store.state.user.USER_INFO.id,
        fileName:"",
        type:"",
        resourceClassification:2,
      }
    };
  },
  created() {
    this.getSchoolSourceList()
  },
  methods: {
    changeIsSchool(e){
      this.type = e;
      this.getSchoolSourceList()
    },
    goCreate(){
      this.$router.push("/createSchoolSource")
    },
    changeType(e){
      if(this.pageSource.type == e){
        this.pageSource.type = ""
      }else{
        this.pageSource.type = e
      }
      this.getSchoolSourceList();
    },
    changeSourceType(e){
      if(this.pageSource.resourceClassification !== e){
        this.pageSource.resourceClassification = e;
        this.getSchoolSourceList();
      }

    },
    getSchoolSourceList(){
      this.isLoading = true
      getSchoolSource({
        ...this.pageSource,
        resourceClassification:this.pageSource.resourceClassification == 2 ? '':this.pageSource.resourceClassification,
        schoolId:this.type == 1 ? this.$store.state.user.USER_INFO.pscShId:""
      }).then(response=>{
        console.log(response);
        this.isLoading = false;
        if(response.code == 200){
          this.schoolSourceList = response.result;
          this.total = response.total
        }
      })
    },
    changeSize(e){
      this.pageSource.pageSize = e;
      this.getSchoolSourceList();
    },
    changePage(e){
      console.log(e)
      this.pageSource.pageNum = e;
      this.getSchoolSourceList()
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    back(){
      this.$router.back()
    }
  }
}
</script>

<style lang="scss" scoped>
.createCource {
  width: 80vw;
  margin: auto;

  .course-top {
    display: flex;
    justify-content: space-between;
    padding: 1vh 0;

    ::v-deep .el-breadcrumb__inner {
      font-size: 1vw;

    }

    .top-right {
      font-size: 1vw;
      color: #1677FF;
    }
  }

  .schoolSource {
    height: 80vh;
    background: #fff;
    .source-tab {
      position: relative;
      display: flex;

      padding: 1.5vw 1.5vw 0;
      .tab-item {
        font-size: 1.5vw;
        margin-left: 1vw;
        color: #999999;
        font-weight: bold;
        cursor: pointer;
      }
      .tab-hr {
        margin-left: 1vw;
        font-size: 1.5vw;
      }
      .checked {
        color: #333333;
        position: relative;
        &::after{
        content:"";
          width: 100%;
          height: .2vh;
          position: absolute;
          bottom: -1vh ;
          left: 0;
          transform: scaleX(.7);
          background: #1677FF;
          border-radius: 1vw;
      }
      }
    }
    .source-select {

      padding: 0 1.5vw;
      display: flex;
      margin-top: 2vh;
      align-items: center;
      .select-name {
        margin-left: 1.3vw;
        font-size: 1.2vw;
        white-space: nowrap;
      }
      .select-input {
        margin-left: .2vw;
        display: flex;
        white-space: nowrap;
      }
      .select-type {
        display: flex;
        margin-left: 1vw;
        align-items: center;
        .type-label {
          font-size: 1.2vw;
          white-space: nowrap;
        }
        .type-item {
          font-size: 1vw;
          padding: .4vw 1vw;
          background: red;
          margin-left: .5vw;
          color: #999999;
          background: none;
          cursor: pointer;
          white-space: nowrap;
        }
        .checked-item {
          background: #D9EDFF;
          color:#1677FF ;
        }
      }
      .select-type-status {
        display: flex;
        align-items: center;
        margin-left: 20vw;
        .status-item {
          font-size: 1vw;
          color: #999999;
          cursor: pointer;
          white-space: nowrap;
        }
        .status-gang {
          font-size: 1.2vw;
          color: #333333;
          transform: rotateY(27deg);
          margin-left: .5vw;
          margin-right: .5vw;
        }
        .checked-status {
          color:#1677FF ;
        }
      }
    }
    .source-main {
      //background: silver;
      height: 60vh;
      .main {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        margin-top: 2vh;
        padding: 0 2vw;
        max-height: 58vh;
        overflow-y: auto;
        padding-left: 3vw;
        .main-item {
          flex: 0 0 calc(25% - 1vw); /* 子元素的宽度和边距 */
          box-shadow: 0 0 .2vw 0px rgba(0,0,0,0.2);
          box-sizing: border-box;
          margin-top: 1vh;
          display: flex;
          align-items: center;
          border-bottom: .1vw solid rgba(0,0,0,0.2);
          flex-direction: column;
          margin-right: 1vw;

          .item-img {
            width: 100%;
            height: 18vh;
            position: relative;
            border-bottom: .01vw solid rgba(0,0,0,0.2);
            box-sizing: border-box;
            img{
              height: 100%;
              width: 100%;
              object-fit:contain;
              margin: 0;
            }
            video {
              height: 100%;
              width: 100%;
              object-fit: contain;
              margin: 0;
            }
            .item-tag {
              position: absolute;
              left: .5vw;
              top: 1vh;
              background: #ffffff;
              padding:.5vh .8vw;
              font-size: 1vw;
              color: #1677FF;
              border-radius: .3vw;
            }
            .item-checkedTag {
              background: #1677FF;
              position: absolute;
              top: 1vh;
              right: .5vw;
              color: #FFFFFF;
              border-radius: 50%;
              width: 1.6vw;
              height: 1.6vw;
              display: flex;
              justify-content: center;
              align-items: center;
              i {
                font-weight: bold;
                font-size: 1.2vw;
              }
            }
          }
          .item-title {
            display: flex;
            flex: 1;
            padding: .5vh 0;
            align-items: center;
            font-size: 1.2vw;
            font-weight: 550;
          }
        }
      }

    }
    .source-page {
      height: 8vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
